﻿@{
    ViewBag.Title = "Carousels";
}

<h2>Carousel samples</h2>

<h3>Sample #1</h3>

@{
    // samples of different ways to generate Html tags
    var header1 = Html.Container()
                        .Add<H3>("First Thumbnail label")
                        .Add<Img>("~/Images/icon-webhostinghub.png")
                        .Add("Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.");

    var header2 = Html.Container<Div>()
                        .Add(Html.Element<H3>("Second Thumbnail label"))
                        .Add("Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.");

    var header3 = Html.Container()
                        .Add<H3>("Third Thumbnail label")
                        .Add("Nullam id dolor id nibh ultricies vehicula ut id elit.");
    
    {
        var carousel = Html.CreateBootstrapCarousel();
        var carousel1 = carousel.CreateCarouselItem(header1, CarouselItemOptions.Active);
        var carousel2 = carousel.CreateCarouselItem(header2);
        var carousel3 = carousel.CreateCarouselItem(header3);

        using (var carouselSection = Html.BootstrapCarousel(carousel))
        {
            using (carouselSection.CarouselItem(carousel1))
            {
    <img src="~/Content/images/bootstrap-mdo-sfmoma-01.jpg" />
            }
            using (carouselSection.CarouselItem(carousel2))
            {
    <img src="~/Content/images/bootstrap-mdo-sfmoma-02.jpg" />
            }
            using (carouselSection.CarouselItem(carousel3))
            {
    <img src="~/Content/images/bootstrap-mdo-sfmoma-03.jpg" />    
            }
        }
    }
}

@using (Html.VisiToggler("show the sample source code ", VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
{
    <br />
    <div class="code">
<span class="InlineComment">//&nbsp;samples&nbsp;of&nbsp;different&nbsp;ways&nbsp;to&nbsp;generate&nbsp;Html&nbsp;tags</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;header1&nbsp;=&nbsp;Html.Container()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add&lt;H3&gt;(<span class="String">"First&nbsp;Thumbnail&nbsp;label"</span>)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add&lt;Img&gt;(<span class="String">"~/Images/icon-webhostinghub.png"</span>)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add(<span class="String">"Cras&nbsp;justo&nbsp;odio,&nbsp;dapibus&nbsp;ac&nbsp;facilisis&nbsp;in,&nbsp;egestas&nbsp;eget&nbsp;quam.&nbsp;Donec&nbsp;id&nbsp;elit&nbsp;non<br />
    &nbsp;mi&nbsp;porta&nbsp;gravida&nbsp;at&nbsp;eget&nbsp;metus.&nbsp;Nullam&nbsp;id&nbsp;dolor&nbsp;id&nbsp;nibh&nbsp;ultricies&nbsp;vehicula&nbsp;ut&nbsp;id&nbsp;elit."</span>);<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;header2&nbsp;=&nbsp;Html.Container&lt;Div&gt;()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add(Html.Element&lt;H3&gt;(<span class="String">"Second&nbsp;Thumbnail&nbsp;label"</span>))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add(<span class="String">"Donec&nbsp;id&nbsp;elit&nbsp;non&nbsp;mi&nbsp;porta&nbsp;gravida&nbsp;at&nbsp;eget&nbsp;metus.&nbsp;Nullam&nbsp;id&nbsp;dolor&nbsp;id<br />
&nbsp;nibh&nbsp;ultricies&nbsp;vehicula&nbsp;ut&nbsp;id&nbsp;elit."</span>);<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;header3&nbsp;=&nbsp;Html.Container()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add&lt;H3&gt;(<span class="String">"Third&nbsp;Thumbnail&nbsp;label"</span>)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add(<span class="String">"Nullam&nbsp;id&nbsp;dolor&nbsp;id&nbsp;nibh&nbsp;ultricies&nbsp;vehicula&nbsp;ut&nbsp;id&nbsp;elit."</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;carousel&nbsp;=&nbsp;Html.CreateBootstrapCarousel();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;carousel1&nbsp;=&nbsp;carousel.CreateCarouselItem(header1,&nbsp;CarouselItemOptions.Active);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;carousel2&nbsp;=&nbsp;carousel.CreateCarouselItem(header2);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;carousel3&nbsp;=&nbsp;carousel.CreateCarouselItem(header3);<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;carouselSection&nbsp;=&nbsp;Html.BootstrapCarousel(carousel))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(carouselSection.CarouselItem(carousel1))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src=<span class="String">"~/Content/images/bootstrap-mdo-sfmoma-01.jpg"</span>&nbsp;/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(carouselSection.CarouselItem(carousel2))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src=<span class="String">"~/Content/images/bootstrap-mdo-sfmoma-02.jpg"</span>&nbsp;/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(carouselSection.CarouselItem(carousel3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src=<span class="String">"~/Content/images/bootstrap-mdo-sfmoma-03.jpg"</span>&nbsp;/&gt;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;}
</div>
}
    

<h3>Sample #2</h3>

@{
    {
        var carousel = Html.CreateBootstrapCarousel();
        var carousel1 = carousel.CreateCarouselItem("Home");
        var carousel2 = carousel.CreateCarouselItem("Profile", CarouselItemOptions.Active);
        var carousel3 = carousel.CreateCarouselItem("Default");

    <div>
        To previous (java-script)
        <input type="button" onclick="@carousel.ToPrev()" value="prev" />
    </div>

    <div>
        To next (java-script)
        <input type="button" onclick="@carousel.ToNext()" value="next" />
    </div>

    <div>
        Pause (java-script)
        <input type="button" onclick="@carousel.Pause()" value="pause" />
    </div>

    <div>
        Cycle (java-script)
        <input type="button" onclick="@carousel.Cycle()" value="cycle" />
    </div>
            
    <div>
        Activate second item of the carousel (java-script)
        <input type="button" onclick="@carousel2.Activate()" value="activate" />
    </div>

        using (var carouselSection = Html.BootstrapCarousel(carousel))
        {
    @carousel1.FromPartial(CarouselPartials.PARTIAL1)
    @carousel2.FromPartial(CarouselPartials.PARTIAL2)
            using (carouselSection.CarouselItem(carousel3))
            {
    <img src="~/Content/images/bootstrap-mdo-sfmoma-03.jpg" />
            }
        }
    }
}

@using (Html.VisiToggler("show the sample source code ", VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
{
    <br />
    <div class="code">
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;carousel&nbsp;=&nbsp;Html.CreateBootstrapCarousel();<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;carousel1&nbsp;=&nbsp;carousel.CreateCarouselItem(<span class="String">"Home"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;carousel2&nbsp;=&nbsp;carousel.CreateCarouselItem(<span class="String">"Profile"</span>,&nbsp;CarouselItemOptions.Active);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;carousel3&nbsp;=&nbsp;carousel.CreateCarouselItem(<span class="String">"Default"</span>);<br />
<br />
&lt;div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;To&nbsp;previous&nbsp;(java-script)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;onclick=<span class="String">"&#64;carousel.ToPrev()"</span>&nbsp;value=<span class="String">"prev"</span>&nbsp;/&gt;<br />
&lt;/div&gt;<br />
<br />
&lt;div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;To&nbsp;next&nbsp;(java-script)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;onclick=<span class="String">"&#64;carousel.ToNext()"</span>&nbsp;value=<span class="String">"next"</span>&nbsp;/&gt;<br />
&lt;/div&gt;<br />
<br />
&lt;div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;Pause&nbsp;(java-script)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;onclick=<span class="String">"&#64;carousel.Pause()"</span>&nbsp;value=<span class="String">"pause"</span>&nbsp;/&gt;<br />
&lt;/div&gt;<br />
<br />
&lt;div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;Cycle&nbsp;(java-script)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;onclick=<span class="String">"&#64;carousel.Cycle()"</span>&nbsp;value=<span class="String">"cycle"</span>&nbsp;/&gt;<br />
&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&lt;div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;Activate&nbsp;second&nbsp;item&nbsp;of&nbsp;the&nbsp;carousel&nbsp;(java-script)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;onclick=<span class="String">"&#64;carousel2.Activate()"</span>&nbsp;value=<span class="String">"activate"</span>&nbsp;/&gt;<br />
&lt;/div&gt;<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;carouselSection&nbsp;=&nbsp;Html.BootstrapCarousel(carousel))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&#64;carousel1.FromPartial(CarouselPartials.PARTIAL1)<br />
&#64;carousel2.FromPartial(CarouselPartials.PARTIAL2)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(carouselSection.CarouselItem(carousel3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&lt;img&nbsp;src=<span class="String">"~/Content/images/bootstrap-mdo-sfmoma-03.jpg"</span>&nbsp;/&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;}
</div>
}